<template>
  <div class="link flex">
    <table border="1" class="tabledata">
      <tr>
        <td colspan="22" class="bg" style="font-size: 16px; font-weight: bold">
          园区介质互通情况
        </td>
      </tr>
      <tr>
        <td colspan="2" rowspan="6">中浩公司 互通</td>
        <td colspan="4">纯苯(t)</td>
        <td colspan="4">甲醇(t)</td>
        <td colspan="4">氮气(万m³)</td>
        <td colspan="4">驰放气(万m³)</td>
        <td rowspan="6" colspan="4"><textarea cols="30" rows="6" v-model="inputs.content1" v-if="!date.isup"></textarea><div v-else style="white-space: pre-line;text-align: left;width:150px">{{inputs.content1}}</div></td>
      </tr>
      <tr>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
      </tr>
      <tr>  
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.cbr" v-if="!date.isup"/><span v-else>{{inputs.cbr}}&nbsp;</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.cby" v-if="!date.isup"/><span v-else>{{inputs.cby}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.jcr" v-if="!date.isup"/><span v-else>{{inputs.jcr}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.jcy" v-if="!date.isup"/><span v-else>{{inputs.jcy}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.dqr" v-if="!date.isup"/><span v-else>{{inputs.dqr}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.dqy" v-if="!date.isup"/><span v-else>{{inputs.dqy}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.cfqr" v-if="!date.isup"/><span v-else>{{inputs.cfqr}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.cfqy" v-if="!date.isup"/><span v-else>{{inputs.cfqy}}</span></td>
      </tr>
      <tr>
        <td colspan="4">解析气(万m³)</td>
        <td colspan="4">污水(t)</td>
        <td colspan="4">蒸汽(中浩供)(t)</td>
        <td colspan="4">蒸汽(中润供)(t)</td>
      </tr>
      <tr>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
      </tr>
      <tr>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.jxqr" v-if="!date.isup"/><span v-else>{{inputs.jxqr}}&nbsp;</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.jxqy" v-if="!date.isup"/><span v-else>{{inputs.jxqy}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.wsr" v-if="!date.isup"/><span v-else>{{inputs.wsr}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.wsy" v-if="!date.isup"/><span v-else>{{inputs.wsy}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.zqzhr" v-if="!date.isup"/><span v-else>{{inputs.zqzhr}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.zqzhy" v-if="!date.isup"/><span v-else>{{inputs.zqzhy}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.zqzr1r" v-if="!date.isup"/><span v-else>{{inputs.zqzr1r}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.zqzr1y" v-if="!date.isup"/><span v-else>{{inputs.zqzr1y}}</span></td>
      </tr>
      <tr>
        <td rowspan="3" colspan="2">炭素公司 互通</td>
        <td colspan="4">焦炉煤气(万m³)</td>
        <td colspan="4">蒸汽(中润供)(t)</td>
        <td colspan="4">焦油(t)186t/m</td>
        <td colspan="4">博泰蒸汽(中润供)(t)</td>
        <td colspan="4" rowspan="3">
          <textarea cols="60" rows="3" v-model="inputs.content2" v-if="!date.isup"></textarea>
          <div v-else style="white-space: pre-line;text-align: left;">{{inputs.content2}}</div>
        </td>
      </tr>
      <tr>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
        <td colspan="2">日量</td>
        <td colspan="2">月累积量</td>
      </tr>
      <tr>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.jrmqr" v-if="!date.isup"/><span v-else>{{inputs.jrmqr}}&nbsp;</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.jrmqy" v-if="!date.isup"/><span v-else>{{inputs.jrmqy}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.zqzr2r" v-if="!date.isup"/><span v-else>{{inputs.zqzr2r}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.zqzr2y" v-if="!date.isup"/><span v-else>{{inputs.zqzr2y}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.jyr" v-if="!date.isup"/><span v-else>{{inputs.jyr}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.jyy" v-if="!date.isup"/><span v-else>{{inputs.jyy}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.btzqr" v-if="!date.isup"/><span v-else>{{inputs.btzqr}}</span></td>
        <td colspan="2"><input type="number" class="dinput" v-model="inputs.btzqy" v-if="!date.isup"/><span v-else>{{inputs.btzqy}}</span></td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup name="yqjzhtqk">
import cache from "@/utils/cache";
import { getYqjzhtqk, yqjzhtqkSave, yqjzhtqkSubmit } from "@/api/report";

let obj = {
  cbr:0,
  cby:0,
  jcr:0,
  jcy:0,
  dqr:0,
  dqy:0,
  cfqr:0,
  cfqy:0,
  jxqr:0,
  jxqy:0,
  wsr:0,
  wsy:0,
  zqzhr:0,
  zqzhy:0,
  zqzr1r:0,
  zqzr1y:0,
  jrmqr:0,
  jrmqy:0,
  zqzr2r:0,
  zqzr2y:0,
  jyr:0,
  jyy:0,
  btzqr:0,
  btzqy:0,
  content1:'记事：',
  content2:'记事：'
}
// 整表 数据绑定
const inputs = ref(obj);

const save = async () => {
  let userInfo = cache.get('userInfo')
  await yqjzhtqkSave({
    inputs:inputs.value,
    aid: userInfo.id,
    aname: userInfo.name,
    date:date.date,
  })
}
const uuuu = ref(cache.get('role_name'))
// 提交方法，调用接口
const submit = async () => {
  await yqjzhtqkSubmit({
    label:uuuu.value,
    date:date.date,
  })
}

onMounted(() => {
  getData()
})

const getData = async () => {
  getYqjzhtqk(date).then((res)=>{
    if(res.length==0){
      inputs.value = obj
    }else{
      inputs.value = res
    }
  })
}
const date = defineProps(['date','isup'])
watch(date, async (n) => {
  getData()
})

defineExpose({
  save,
  submit
})
</script>

<style lang="scss" scoped>
.tabledata {
  width: 100%;
  border: 1px solid #aaa;
  td {
    text-align: center;
    border: 1px solid #aaa;
    padding: 3px;
  }
  .bg{
    background: #ccc;
  }
  .dinput{
    text-align: center;
    border-radius: 5px;
    width: 80px;
    border: 1px solid #ccc;
  }
}
</style>
